<template>
  <div class="m-personal_box">
    <div
            class="item-node"
            v-for="$item in itemData"
            :key="$item.label"
            @click="handleSelect($item)"
    >
      <div class="node-info">
        <i :class="['iconfont',$item.icon]"></i>
        <span>{{$item.label}}</span>
      </div>
      <i class="iconfont icon-arrow-right-s-line"></i>
    </div>
  </div>
</template>

<script lang="ts">
    import { Component, Vue } from "vue-property-decorator";

    interface IPersonalItem {
        icon: string;
        label: string;
        route?: string;
        click?: (row: object) => void;
    }

    @Component({
        name: "Tab3",
        created: function () {
            let user=localStorage.getItem('users1');

            if(user==""||user==null){
                this.$router.replace("/login");
            }


        },
    })
    export default class extends Vue {
        itemData: IPersonalItem[] = [
            {
                icon: "icon-file-text-line",
                label: "个人信息",
                route: "/user"
            },
            {
                icon: "icon-shield-flash-line",
                label: "安全设置",
                route: "/security_set"
            },
            {
                icon: "icon-share-circle-line",
                label: "推广分享",
                route: "/share"
            },
            {
                icon: "icon-folder--line",
                label: "项目说明",
                route: "/explain"
            },
            {
                icon: "icon-wallet-line1",
                label: "我的资产",
                route: "/mymoney"
            },
            {
                icon: "icon-group-line",
                label: "我的团队",
                route: "/myuser"
            },
            {
                icon: "icon-customer-service--line",
                label: "客服中心",
                route: "/service"
            },
            {
                icon: "icon-shut-down-line",
                label: "退出登录",
                click: (row) => this.checkout(row)
            }
        ];

        // 判断是否有route字段，然后执行route-lin操作，否则执行click字段
        handleSelect(row: any) {
            row.route ? this.$router.push(row.route) : row.click(row);
        }

        checkout(row: object) {
            this.$router.replace("/login");
            this.$store.commit("changeActiveBottomNav", "tab-1");
        }
    }
</script>
